/**
 * React Starter Kit (https://www.reactstarterkit.com/)
 *
 * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import Layout from '../../components/Layout';
import s from './Home.css';
import classnames from 'classnames';
import Zone from '../../components/Zone';
import TopicRow from '../../components/TopicRow';
import { Panel, Col, DropdownButton, MenuItem } from 'react-bootstrap';
import connectComponent from '../../utils/connectComponent';

class Home extends React.Component {

  componentWillMount() {
    const { actions } = this.props;
    actions.tryAuth();
  }

  componentDidMount() {
    const { actions } = this.props;
    actions.getZones();
  }

  onSelectedMenu(selectedMenuKey, args2) {
    const { actions } = this.props;
    let event;
    let selectedSubmenuKey = '';

    if (typeof (args2) === 'string') {
      selectedSubmenuKey = args2 || '';
    }

    if (selectedMenuKey === '') return;

    actions.getTopicsByMenu(selectedMenuKey, selectedSubmenuKey);
  }

  _topics() {
    if (this.props.topics.length > 0) {
      return (<ul className={s.content_list}>
        {this.props.topics.map((topic, index) => (<TopicRow key={topic._id} index={index + 1} item={topic} />))}
      </ul>);
    }
    return (<div>无数据</div>);
  }

  _panelTitle() {
    return (
      <div>
        <DropdownButton bsStyle={'link'} title={'排序'} id={'dropdown-basic-link'}>
          <MenuItem eventKey="1">评论时间</MenuItem>
          <MenuItem eventKey="2">更新时间</MenuItem>
        </DropdownButton>
      </div>
    );
  }

  render() {
    return (
      <Layout>
        <div>
          <Col md={10}>
            <Zone selectedZone={this.props.selectedZone || {}} zones={this.props.zones || []} />
          </Col>
          <Col md={10}>
            <Panel header={this._panelTitle()}>
              {this._topics()}
            </Panel>
          </Col>
        </div>
      </Layout>
    );
  }
}

const LayoutComponent = withStyles(s)(Home);
function mapStateToProps(state) {
  return {
    zones: state.home.zones || [],
    topics: state.home.topics || [],
    selectedZone: state.home.selectedZone || '',
    selectedMenu: state.home.selectedMenu || '',
    selectedSubmenu: state.home.selectedSubmenu || '',
  };
}

export default connectComponent({ LayoutComponent, mapStateToProps });
